<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />        
        <script type="text/javascript"
                src="http://maps.google.com/maps/api/js?sensor=true">
        </script>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            function initialize_map() {
                /* Decalre some lattitudes and longtitudes */
                var latlng_Australia = new google.maps.LatLng(-25.482951,133.857422);
                var latlng_Brisbane = new google.maps.LatLng(-27.498527, 153.028564);
                var latlng_Sydney = new google.maps.LatLng(-33.861293,151.149902);
                var latlng_Canberra = new google.maps.LatLng(-35.335293,149.095459);
                var latlng_Perth = new google.maps.LatLng(-31.942840,115.861816);
                var latlng_Adelaide = new google.maps.LatLng(-34.939985,138.592529);

                /* Setup Australia map */
                var myOptions = {
                    zoom: 5,
                    center: latlng_Australia,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);

                /* Declare some contents for popup info window */
                var contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<h1 id="firstHeading" class="firstHeading">Starlight Express Room at Sydney Children Hospital</h1>'+
                    '<div id="bodyContent">'+
                    '<p>Living with illness or injury can cause enormous strain in the lives of children \n\
                    and their families. The pain, loneliness and isolation that sick children feel dominates \n\
                    their lives, and they often miss out on normal experiences that healthy children take for \n\
                    granted.</p>'+
                    '<iframe width="260" height="200" src="http://www.youtube.com/embed/UZ0qafOiLEU" frameborder="0" allowfullscreen></iframe>'+
                    '</div>'+
                    '</div>';
                
                var infowindow = new google.maps.InfoWindow({
                    content: contentString,
                    maxWidth: 300
                });
                
                var icn_star = 'img/icn-star.png';                
                var marker_Sydney = new google.maps.Marker({
                    position: latlng_Sydney,
                    map: map,
                    title:"Sydney Starlight Party - Sydney High School",
                    icon: icn_star
                });
                var marker_Brisbane = new google.maps.Marker({
                    position: latlng_Brisbane,
                    map: map,
                    title:"Brisbane Starlight Fair - Brisbane Kindergarden",
                    icon: icn_star
                });
                var marker_Canberra = new google.maps.Marker({
                    position: latlng_Canberra,
                    map: map,
                    title:"Canberra Starlight Party - Canberra Junior High School",
                    icon: icn_star
                });
                var marker_Adelaide = new google.maps.Marker({
                    position: latlng_Adelaide,
                    map: map,
                    title:"Adelaide Starlight Party - University of Adelaide",
                    icon: icn_star
                });
                var marker_Perth = new google.maps.Marker({
                    position: latlng_Perth,
                    map: map,
                    title:"Perth Starlight Party - Parth Children Hospital",
                    icon: icn_star
                });

                /* Add event listeners for markers */
                google.maps.event.addListener(marker_Sydney, 'click', function() {
                    infowindow.open(map,marker_Sydney);
                });
                google.maps.event.addListener(marker_Brisbane, 'click', function() {
                    infowindow.open(map,marker_Brisbane);
                });
                google.maps.event.addListener(marker_Canberra, 'click', function() {
                    infowindow.open(map,marker_Canberra);
                });
                google.maps.event.addListener(marker_Adelaide, 'click', function() {
                    infowindow.open(map,marker_Adelaide);
                });
                google.maps.event.addListener(marker_Perth, 'click', function() {
                    infowindow.open(map,marker_Perth);
                });
            }
        </script>

        <style type="text/css">
center iframe {
	display:none;
}
            html { height: 100% }
            body { margin: 0px; padding: 20px; background: #222;}
            #map_canvas { height: 100% }
            #side-advert { text-align: center;}
            #side-advert img { margin-bottom: 10px;}
            .wish-list-item,
            .event-list-item { border: 1px solid #F5F5F5; width: 90%; height: 75px; margin: 0 auto; margin-bottom: 5px; }
            .wish-list-item:hover,
            .event-list-item:hover {                
                background: #68458C;
            }
            }
        </style>
    </head>
    <body>
        <div id="app-wrapper" style="background: #333; width:100%; height:100%; float:left">
            <div id="side-menu" style="width:20%; height:80%; float:left; background: #555;color:#FFF;">
                <div id="side-menu-content" style="padding:10px;">
                    <h2>Welcome to Starlight Australia.</h2>
                    <strong>What is going on at Starlight?</strong> <br/>
                    <div id="event-item-1" class="event-list-item">Australia All Events </div>
                    <div id="event-item-2" class="event-list-item">Adam Story</div>
                    <div id="event-item-3" class="event-list-item">Perth Event 3</div>
                    <strong>Grant a wish now:</strong> <br/>
                    <div id="wish-item-1" class="wish-list-item">$50</div>
                    <div id="wish-item-2" class="wish-list-item">$100</div>
                    <div id="wish-item-3" class="wish-list-item">$200</div>
                </div>
            </div>
            <div id="content-wrapper" style="width:65%; height:80%; float:left;color:#FFF;">
                <div id="main-content" style="color: #FFF;">
                    <h2>Welcome to Starlight</h2>
                    Here comes some information about Starlight
                </div>
                <div id="map_canvas" style="width:100%; height:100%;">
                </div>
                <div id="canberra-video" style="width:100%;height:100%;display:none;margin:0;padding:0;">
                    <iframe width="100%" height="95%" src="http://www.youtube.com/embed/KplL9arR7Co" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            <div id="side-advert" style="width:15%; height:80%; float:left;background: #FFF;">
                <strong>Sponsors & Partners</strong>
                <img src="http://www.starlight.org.au/SiteCollectionImages/Corp-Partner-Logos/ebgames.jpg" />
                <img src="http://www.starlight.org.au/SiteCollectionImages/Corp-Partner-Logos/goldencasket.jpg"/>
                <img src="http://www.starlight.org.au/PublishingImages/Optus-Web-Logov2.jpg"/>
                <img src="http://www.starlight.org.au/AboutStarlight/PublishingImages/Corporate-Logos/TDK-logoweb.jpg"/>
                <img src="http://www.starlight.org.au/AboutStarlight/PublishingImages/Corporate-Logos/AustraliaPost_logo_wb4.jpg"/>
            </div>
              
                
           
        </div>       
    </body>    
    <script type="text/javascript">
        jQuery('#event-item-1').click(function(){
            jQuery('#main-content').hide();
            jQuery('#canberra-video').hide();  
            jQuery('#map_canvas').show();
            initialize_map();
        });
        jQuery('#event-item-2').click(function(){
            jQuery('#map_canvas').hide();
            jQuery('#main-content').hide();
            jQuery('#canberra-video').show();
        });
        jQuery('#wish-item-1').click(function(){
           
        });
    </script>
</html>